<template>
  <div>
    <el-form>
      <el-form-item label="姓名(昵称)">
        <el-input v-model.trim="users.name" />
      </el-form-item>
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:1111/user/uploadIcon"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          name="avatar"
        >
          <img
            v-if="imageUrl"
            :src="imageUrl"
            :onerror='notFind'
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="自我介绍">
        <el-input v-model.trim="users.introduction" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      imageUrl: '',
      users: {
        name: this.$store.state.Logins.name,
        avatar: this.$store.state.Logins.avatar,
        introduction: this.$store.state.Logins.introduction,
      },
      id: this.$store.state.Logins.id,
      notFind: 'this.src="' + 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3' + '"'
    }
  },
  methods: {
    ...mapActions({
      updatePro: 'Logins/updatePro'
    }),
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.users.avatar = res.data.avatar
    },
    async submit() {
      const res = await this.updatePro({ ...this.users, id: this.id })
      if (res.data.success == true) {
        this.$message({
          message: '恭喜你，修改成功',
          type: 'success'
        });
      }
    }
  },
  mounted() {
      this.imageUrl = 'http://localhost:1111/upload/' + this.users.avatar
  }
}
</script>

<style scoped>
</style>